<template>
  <view class="loginContent">
    <view class="loginHeader">
      <text class="loginText">欢迎登录</text>
      <text class="loginText">你好，</text>
    </view>
    <view class="loginBody">
      <view class="loginItem">
        <nut-input
          placeholder="请输入账号"
          v-model="loginInfo.userName"
          clearable
        >
        </nut-input>
      </view>
      <view class="loginItem">
        <nut-input
          placeholder="请输入密码"
          v-model="loginInfo.password"
          type="password"
          clearable
        />
      </view>
      <view class="loginButton">
        <nut-button block type="primary" @click="userLogin">登录</nut-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import httpService from "../../service/httpService";
// import { useUserStore } from "../../stores/store.ts";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const loginInfo = reactive({
  userName: "",
  password: "",
});
async function userLogin() {
  userStore.login({
    Loginname: loginInfo.userName,
    Password: loginInfo.password,
  });
}
</script>

<style lang="scss">
.loginContent {
  height: 100%;
  width: 100%;
}
.loginHeader {
  height: 35%;
  display: flex;
  flex-direction: column-reverse;
  background-image: url("");
  // background-image: url("/src/assets/images/login_bg.png");
  background-size: 100% 100%;
  .loginText {
    margin-left: 60px;
    font-size: 72px;
    margin-bottom: 30px;
  }
}
.loginBody {
  height: 60%;
  margin: 20px 60px;
  .loginButton {
    margin-top: 50px;
  }
  .loginItem {
    margin-top: 20px;
  }
}
page {
  height: 100%;
}
</style>
